<!-- 补充采购单号弹窗页面 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="补充采购单号" width="600px" height="360">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-row>
        <px-col :span="24">
          <px-form-item label="关联采购单号" prop="purchaseNum">
            <px-input v-model="formValue.purchaseNum" placeholder="请输入" />
          </px-form-item>
        </px-col>
        <px-col :span="24">
          <px-form-item label="申请人员" prop="purchaseUser">
            <px-input v-model="formValue.purchaseUser" placeholder="请输入单位" maxlength="50" clearable />
          </px-form-item>
        </px-col>
      </px-row>
    </px-form>
    <div style="margin-top: 56px; text-align: right">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">确认</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import { PxMessage } from "px-ui";
import { updatePurchaseList } from "@/api/erc/material";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable", "backMainPage", "getDetail"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "sparePartsId"]);

const visible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  typeTitle: "补充采购单号",
  formValue: {
    inNum: "",
    purchaseNum: "",
    purchaseUser: ""
  }
});
const { formValue } = toRefs(state);

// 表单校验规则
const rules = computed(() => ({
  purchaseNum: [{ required: true, message: "关联采购单号不能为空", trigger: "blur" }],
  purchaseUser: [{ required: true, message: "申请人员不能为空", trigger: "blur" }]
}));

// 取消按钮
const closeDialog = () => {
  formValue.value = {};
  emits("closeDialog");
  emits("getDetail");
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const params = formValue.value;
      await updatePurchaseList({ ...params, inNum: props.sparePartsId });
      PxMessage.success("新增成功");
      emits("closeDialog");
      // emits("backMainPage");
      formValue.value = {};
    }
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/add-dialog.scss");
</style>
